<template>
	<view>
		<view class="head-block" :class="{'head-time-range': headTimeRange}">
			<!-- padding 40rpx -->
			<view class="head">
				<!-- 90rpx -->
				<!-- <view class="tabs">
					<view class="tab-item" :class="{active: tabsIndex === index}" v-for="(item, index) in navTabs" :key="index" @click="tabChange(index)">
						<text class="txt">{{item.name}}</text>
						<text class="icon"></text>
					</view>
				</view> -->
				<view class="tabs">
					<u-subsection mode="button" @change="tabChange" :list="navTabs" :current="tabsIndex" inactive-color="#666666" activeColor="#ffffff"></u-subsection>
				</view>
				
				<!-- 80rpx -->
				<view class="order-search">
					<image src="/static/images/search002.png" mode="widthFix" class="img"></image>
					<input type="text" v-model="order" class="inp" placeholder="快递单号查询" placeholder-class="inp-place">
				</view>
				
				<!-- 74rpx -->
				<view class="other-condition">
					<picker mode="selector" class="order-type" :range="orderTypeList" range-key="title" @change="orderTypeChange" v-if="type !== 'outWarehousing'">
						<view class="order-type">
							<text class="txt">{{orderTypeSelectedIndex == 0 ? '订单类型' : orderTypeList[orderTypeSelectedIndex].title}}</text>
							<image src="/static/images/down.png" mode="widthFix" class="img"></image>
						</view>
					</picker>
					
					<block v-if="type !== 'warehousing'">
						<picker mode="selector" class="warehouse" :style="type !== 'outWarehousing' ? '' : 'justify-content: flex-start;'" range-key="name" :range="warehousingList" @change="warehousingChange">
							<view class="warehouse">
								<text class="txt">{{warehousingSelectedIndex == 0 ? '仓库' : warehousingList[warehousingSelectedIndex].name}}</text>
								<image src="/static/images/down1.png" mode="widthFix" class="img"></image>
							</view>
						</picker>
						
						
						<view class="surname-search">
							<input type="text" v-model="surname" placeholder="搜索收取件人" placeholder-class="inp-class" class="inp">
							<view class="image">
								<image src="/static/images/search003.png" mode="widthFix" class="img"></image>
							</view>
						</view>
					</block>
					<block v-else>
						<view class="product-search">
							<input type="text" v-model="title" placeholder="搜索品名" placeholder-class="inp-class" class="inp">
						</view>
						
						<view class="addressee-search">
							<input type="text" v-model="surname" placeholder="搜索收件人" placeholder-class="inp-class" class="inp">
						</view>
					</block>
				</view>
			
				<!-- 68rpx -->
				<view class="time-range" v-if="headTimeRange">
					<uni-datetime-picker class="time-range" type="daterange" @change="dateRangeChange">
						<view class="time-item start-time">
							<input type="text" disabled :value="dateRange[0]" class="inp" placeholder="开始日期" placeholder-class="inp-place">
							<image src="/static/images/triangle-lower001.png" mode="widthFix" class="img"></image>
						</view>
						
						<view class="time-item end-time">
							<input type="text" disabled :value="dateRange[1]" class="inp" placeholder="结束日期" placeholder-class="inp-place">
							<image src="/static/images/triangle-lower001.png" mode="widthFix" class="img"></image>
						</view>
					</uni-datetime-picker>
				</view>
			</view>
		</view>
	
		<view class="order-list">
			<view class="order-item" v-for="(item, index) in list" :key="index" @click="orderDetail(item)">
				<view class="order-head">
					<view class="order-type" @click.stop="orderSelect(item)">
						<image :src="listSelectedIds.includes(item.recorded_id) ? '/static/images/radio-active.png' : '/static/images/radio.png'" mode="widthFix" class="img" v-if="type === 'warehousing'"></image>
						<text class="txt">{{item.typeroad || item.come_type_name || item.warehouse_items_type || ''}}订单</text>
					</view>
					<view class="order-number">
						<text class="txt">快递单号：{{item.logistics_number || ''}}</text>
						<image @click.stop="copyData(item.logistics_number)" class="copy-icon" src="/static/images/copy.png" mode="widthFix"></image>
					</view>
				</view>
				
				<view class="order-content">
					<view class="main-order-num" v-if="type === 'outWarehousing'">
						<text class="txt">母单号：{{item.logistics_sn}}</text>
						<image @click.stop="copyData(item.logistics_sn)" class="copy-icon" src="/static/images/copy.png" mode="widthFix"></image>
					</view>
					
					<view class="time-status">
						<block v-if="type === 'outWarehousing'">
							<view class="time" v-if="tabsIndex == 1">{{item.cutoff_time || ''}}</view>
							<view class="time" v-else>{{item.jingcang_time || ''}}</view>
							<view class="status status-red">{{item.LogisticStatus || item.is_instruction || ''}}</view>
						</block>
						<block v-else-if="type === 'warehousing'">
							<view class="time">{{item.cutoff_time || ''}}</view>
							<view class="status status-red">{{item.order_status_name || item.is_instruction || ''}}</view>
						</block>
						<block v-else>
							<view class="time">{{item.add_time || ''}}</view>
							<view class="status status-red">{{item.order_status_name || item.is_instruction || ''}}</view>
						</block>
					</view>
					
					<view class="goods">
						<view class="image">
							<image :src="item.good_pic[0]" mode="aspectFill" class="img"></image>
						</view>
						<view class="goods-info">
							<view class="title-warehouse">
								<view class="title">{{item.good_quantity.join('/') || ''}}</view>
								<!-- <view class="warehouse">{{item.warehouse || ''}}</view> -->
							</view>
							<view class="transport-info">
								<view class="type-info" :class="{'type-info-red' : type !== 'warehousing'}">
									<view v-if="type === 'warehousing'" class="cushion-freight cushion-freight-red">代垫运费{{item.acting_mat_fee || ''}}元</view>
									<view class="transport-type" v-else-if="item.channel_name">{{item.channel_name || ''}}</view>
									<view class="goods-type">{{item.good_type || ''}}</view>
								</view>
								<view class="number-info">
									<view class="number">数量：{{item.good_number || ''}}</view>
									<view class="number">件数：{{item.good_size || ''}}</view>
								</view>
							</view>
						</view>
					</view>
				
					<view class="express-info not-warehousing" v-if="type === 'notWarehousing'">
						<block v-if="tabsIndex == 1">
							<block v-if="item.come_type == 2">
								<view class="pick-up" v-if="item.username">取件人：{{item.username || ''}}</view>
							</block>
						</block>
						<block v-else>
							<view class="pick-up" v-if="item.user_name && item.typeroadrow == 1">取件人：{{item.user_name || ''}}</view>
							<view class="receiving" v-if="item.pick_name">收件人：{{item.pick_name || ''}}</view>
						</block>
						<view class="time-operation">
							<view class="time"></view>
							<view class="operation">
								<view class="see-image" @click.stop="showImage(item)" >查看图片</view>
								<block v-if="item.wait_type == 1">
									<view class="delete-btn" @click.stop="deleteOrder(item)">
										<image src="/static/images/delete001.png" mode="widthFix" class="img"></image>
									</view>
									<view class="edit-btn" @click.stop="editOrder(item)">编辑</view>
								</block>
							</view>
						</view>
					</view>
					
					<view class="express-info warehousing" v-else-if="type === 'warehousing'">
						<view class="pick-up">取件人：{{item.username}}</view>
						<view class="specs-operation">
							<view class="specs">
								<view class="specs-item">重量：{{item.good_weight}}kg</view>
								<view class="specs-item">尺寸：{{item.good_long}}*{{item.good_wide}}*{{item.good_high}}</view>
								<view class="specs-item">材积：{{item.volume_sea}}</view>
								<view class="specs-item">体积重：{{item.volume_air}}</view>
							</view>
							<!-- <view class="edit-btn">编辑</view> -->
						</view>
						<view class="btn-list">
							<view class="see-image" @click.stop="showImage(item)" >查看图片</view>
						</view>
					</view>
					
					<view class="express-info out-warehousing" v-else>
						<view>
							<view class="pick-freight">
								<view class="pick-up" v-if="item.pick_name">收件人：{{item.pick_name}}</view>
								<!-- <view class="freight freight-red">{{item.charge_offs_type || ''}}</view> -->
							</view>
							<!-- <view class="receiving" v-if="item.user_name">取件人：{{item.user_name}}</view> -->
						</view>
						<!-- <view class="apply">申请：{{item.add_time}}</view> -->
						
						<!-- <view class="specs">
							<view class="specs-item">重量：{{item.good_weight}}kg</view>
							<view class="specs-item">体积重：{{item.volume_air}}</view>
							<view class="specs-item">材积：{{item.volume_sea}}</view>
						</view> -->
						<view class="see-image" @click.stop="showImage(item)" >查看图片</view>
						<view class="back-btn" @click.stop="orderBack(item)" v-if="tabsIndex == 1 && item.into_warehouse == 2">退回</view>
					</view>
				</view>
			</view>
		</view>
		
		<u-loadmore :status="loadStatus" height="80rpx" />
		
		<view class="order-summary-block" v-if="type === 'warehousing'">
			<view class="order-summary">
				<view class="summary">
					<view class="summary-info">
						<view class="order-all" @click="orderSelectAll">
							<image :src="orderSelectAllStatus ? '/static/images/radio-active.png' : '/static/images/radio.png'" class="img" mode="widthFix"></image>
							<text class="txt">全选</text>
						</view>
						<view class="summary-detail">
							<view class="summary-item">
								<text class="title">总件数：</text>
								<text class="value">{{summaryInfo.size || 0}}</text>
							</view>
							<view class="summary-item">
								<text class="title">总重量：</text>
								<text class="value">{{summaryInfo.weight || 0}}kg</text>
							</view>
						</view>
					</view>
					<view class="pack-btn" @click="applyPack">申请打包</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getFaceList} from '@/api/index.js';
	import {
		getExpressOrderList,
		getAppointmentOrderList,
		getExpressOrderList2,
		getAppointmentOrderList2,
		
		expressOrderDelete,
		appointmentOrderDelete,
		packOrderJudge,
		
		orderRetuenBack
	} from '@/api/order.js';
	export default {
		data() {
			return {
				type: 'notWarehousing', // notWarehousing 待进仓  warehousing 已进仓  outWarehousing 已出仓,
				page: 1,
				limit: 10,
				loadStatus: 'loadmore',
				dateRange: [],
				order: '',
				surname: '',
				title: '',
				summaryInfo: {
					size: '',
					weight: ''
				},
				notWarehousingTabs: [
					{name: '急发订单', value: 1},
					{name: '集运订单', value: 2}
				],
				warehousingList: [],
				warehousingSelectedIndex: 0,
				warehousingTabs: [],
				outWarehouse: [
					{name: '急发订单', value: 1},
					{name: '集运订单', value: 2}
				],
				emergencyOrderTypeList: [
					{title: '全部订单', value: 0},
					{title: '取件急发', value: 1},
					{title: '快递急发', value: 2}
				],
				collectionOrderTypeList: [
					{title: '全部订单', value: 0},
					{title: '快递集运', value: 1},
					{title: '取件集运', value: 2}
				],
				orderTypeList: [],
				orderTypeSelectedIndex: 0,
				tabsIndex: 0,
				list: [],
				listSelectedIds: []
			};
		},
		computed: {
			navTabs() {
				let tabs = [];
				switch(this.type) {
					case 'notWarehousing':
					default:
						tabs = this.notWarehousingTabs;
						break;
					case 'warehousing':
						tabs = this.warehousingTabs;
						break;
					case 'outWarehousing':
						tabs = this.outWarehouse;
						break;
				}
				return tabs;
			},
			headTimeRange() {
				return (this.type === 'notWarehousing' && this.tabsIndex === 1) || this.type === 'warehousing';
			},
			orderSelectAllStatus() {
				return this.list && this.list.length && this.listSelectedIds.length === this.list.length;
			}
		},
		watch: {
			async order() {
				await this.pullOrderList();
			},
			async surname() {
				await this.pullOrderList();
			},
			async title() {
				await this.pullOrderList();
			}
		},
		async onLoad(options) {
			if (this.type === 'notWarehousing' || this.type === 'outWarehousing') {
				this.tabsIndex = 1;
			}
			if (options.type && ['notWarehousing', 'warehousing', 'outWarehousing'].includes(options.type)) {
				this.type = options.type;
			}
			if (options.orderTypeSelectedIndex) {
				this.orderTypeSelectedIndex = Number(options.orderTypeSelectedIndex);
			}
			if (options.tabsIndex) {
				this.tabsIndex = Number(options.tabsIndex);
			}
			
			console.log(options);
			this.setNavbarTitle();
			this.orderTypeUpdate(false);
			await this.loadData();
		},
		async onPullDownRefresh() {
			await this.pullOrderList();
			uni.stopPullDownRefresh();
		},
		async onReachBottom() {
			await this.loadOrderList();
		},
		methods: {
			async orderBack(item) {
				try{
					let [modalErr, modalRes] = await uni.showModal({
						title: '提示',
						content: '是否回退订单?'
					});
					if (modalErr !== null || !modalRes.confirm) {
						return;
					}
					await orderRetuenBack(item.recorded_id);
					uni.showToast({
						title: '退回成功',
						icon: 'none'
					});
					await this.pullOrderList();
				}catch(e){
					
				}
			},
			copyData(data) {
				uni.setClipboardData({
					data
				});
			},
			async deleteOrder(item) {
				if (this.type === 'notWarehousing') {
					if (item.wait_type != 1) {
						return;
					}
					let [modalErr, modalRes] = await uni.showModal({
						title: '提示',
						content: '是否删除订单？'
					});
					if (modalErr !== null || !modalRes.confirm) {
						return;
					}
					if (this.tabsIndex == 0) {
						await expressOrderDelete(item.order_id);
					} else {
						await appointmentOrderDelete(item.recorded_id);
					}
					uni.showToast({
						title: '删除成功',
						icon: 'none'
					});
					await this.pullOrderList();
				}
			},
			editOrder(item) {
				if (this.type === 'notWarehousing') {
					if (item.wait_type != 1) {
						return;
					}
					let url;
					if (this.tabsIndex == 0) {
						if (item.typeroadrow == 1) {
							// 取件急发
							url = `/pages/receive/insert?id=${item.order_id}`;
						} else {
							// 快递急发
							url = `/pages/express/issue?id=${item.order_id}`;
						}
					} else {
						if (item.come_type == 1) {
							// 快递集运
							url = `/pages/centralized/insert?id=${item.recorded_id}`;
						} else {
							// 取件集运
							url = `/pages/transport/index?id=${item.recorded_id}`;
						}
					}
					uni.navigateTo({url});
				} else if (this.type === 'warehousing') {
					let url;
					if (item.come_type == 1) {
						// 快递集运
						url = `/pages/centralized/insert?type=detail&id=${item.recorded_id}`;
					} else {
						// 取件集运
						url = `/pages/transport/index?type=detail&id=${item.recorded_id}`;
					}
					uni.navigateTo({url});
				} else {
					let url = '/pages/order/out-warehousing-edit';
					if (this.tabsIndex == 0) {
						url += `?type=express&id=${item.logistics_id}`;
					} else {
						url += `?type=appointment&id=${item.recorded_id}`;
					}
					uni.navigateTo({url});
				}
			},
			async pullOrderList() {
				this.page = 1;
				this.loadStatus = 'loadmore';
				await this.loadOrderList();
			},
			async loadOrderList() {
				try{
					if (this.loadStatus === 'nomore') {
						return;
					}
					this.loadStatus = 'loading';
					let page = this.page;
					let data = {p: page, limit: this.limit}, res;
					if (this.type === 'notWarehousing') {
						data.logistics_number = this.order;
						data.delivery_site_id = this.warehousingList[this.warehousingSelectedIndex]?.delivery_site_id || '';
						if (this.navTabs[this.tabsIndex]?.value == 1) {
							data.user_name = this.surname;
							data.pick_name = this.surname;
							data.typeroad = this.orderTypeList[this.orderTypeSelectedIndex]?.value || '';
							res = await getExpressOrderList(data);
						} else {
							data.into_warehouse = 0;
							data.start_date = this.dateRange[0] || '';
							data.end_date = this.dateRange[1] || '';
							data.come_type = this.orderTypeList[this.orderTypeSelectedIndex]?.value || '';
							data.username = this.surname;
							res = await getAppointmentOrderList(data);
						}
					} else if (this.type === 'warehousing') {
						data.into_warehouse = 1;
						data.come_type = this.orderTypeList[this.orderTypeSelectedIndex]?.value || '';
						data.start_date = this.dateRange[0] || '';
						data.end_date = this.dateRange[1] ||  '';
						data.logistics_number = this.order;
						data.good_quantity = this.title;
						data.username = this.surname;
						data.delivery_site_id = this.navTabs[this.tabsIndex]?.value || '';
						res = await getAppointmentOrderList(data);
						this.listSelectedIds = [];
						this.summaryCalculation();
					} else {
						if (this.navTabs[this.tabsIndex]?.value == 1) {
							data.logistics_sn = this.order;
							data.pick_name = this.surname;
							data.username = this.surname;
							data.warehouse = this.warehousingList[this.warehousingSelectedIndex]?.warehouse_id || '';
							data.warehouse_items_type = '1,2';
							res = await getExpressOrderList2(data);
						} else {
							data.logistics_number = this.order;
							data.username = this.surname;
							data.delivery_site_id = this.warehousingList[this.warehousingSelectedIndex]?.delivery_site_id || '';
							res = await getAppointmentOrderList2(data);
						}
					}
					this.loadStatus = 'loadmore';
					let list = res.data || [],
						listLength = list.length;
					if (listLength < this.limit) {
						this.loadStatus = 'nomore';
					}
					this.list = [...(page === 1 ? [] : this.list), ...list];
					this.page++;
				}catch(e){
					this.loadStatus = 'loadmore';
					console.log(e);
				}
			},
			async dateRangeChange(event) {
				this.dateRange = event;
				await this.pullOrderList();
			},
			async warehousingChange(event) {
				let index = event.detail.value;
				if (this.warehousingSelectedIndex == index) {
					return;
				}
				this.warehousingSelectedIndex = index;
				await this.pullOrderList();
			},
			async orderTypeChange(event) {
				let index = event.detail.value;
				if (this.orderTypeSelectedIndex == index) {
					return;
				}
				this.orderTypeSelectedIndex = index;
				await this.pullOrderList();
			},
			orderTypeUpdate(init = true) {
				if (init === true) {
					this.orderTypeSelectedIndex = 0;
				}
				if (this.type === 'notWarehousing') {
					let tabValue = this.navTabs[this.tabsIndex].value;
					this.orderTypeList = tabValue == 1 ? this.emergencyOrderTypeList : this.collectionOrderTypeList;
				} else if (this.type === 'warehousing') {
					this.orderTypeList = this.collectionOrderTypeList;
				} else {
					let tabValue = this.navTabs[this.tabsIndex].value;
					this.orderTypeList = tabValue == 1 ? this.emergencyOrderTypeList : this.collectionOrderTypeList;
				}
			},
			async loadData() {
				await this.loadWarehousingList();
				await this.loadOrderList();
			},
			async loadWarehousingList() {
				try{
					let res = await getFaceList();
					this.warehousingList = res?.data?.warehouse || [];
					if (this.type === 'warehousing') {
						this.warehousingTabs = this.warehousingList.map(item => {
							return {name: item.name, value: item.delivery_site_id};
						});
					}
					this.warehousingList = [{name: '全部仓库', value: 0}, ...this.warehousingList];
				}catch(e){
					//TODO handle the exception
				}
			},
			summaryCalculation() {
				let weight = 0,
					size = 0;
				this.list.forEach(item => {
					if (!this.listSelectedIds.includes(item.recorded_id)) {
						return;
					}
					weight += Number(item.good_weight);
					size += Number(item.good_size);
				});
				this.summaryInfo.size = size;
				this.summaryInfo.weight = weight.toFixed(2);
			},
			orderSelectAll() {
				if (this.type !== 'warehousing') {
					return;
				}
				if (this.orderSelectAllStatus) {
					this.listSelectedIds = [];
				} else {
					this.listSelectedIds = this.list.map(item => item.recorded_id);
				}
				this.summaryCalculation();
			},
			orderSelect (item) {
				if (this.type !== 'warehousing') {
					return;
				}
				if (this.listSelectedIds.includes(item.recorded_id)) {
					this.listSelectedIds.splice(this.listSelectedIds.indexOf(item.recorded_id), 1);
				} else {
					this.listSelectedIds.push(item.recorded_id);
				}
				this.summaryCalculation();
			},
			orderDetail(item) {
				this.editOrder(item);
			},
			async applyPack() {
				try{
					if (!this.listSelectedIds || !this.listSelectedIds.length) {
						uni.showToast({
							title: '请选择订单',
							icon: 'none'
						});
						return;
					}
					await packOrderJudge(this.listSelectedIds);
					uni.navigateTo({
						url: `/pages/order/pack?ids=${encodeURIComponent(JSON.stringify(this.listSelectedIds))}`
					});
				}catch(e){
					console.log(e);
				} finally {
					uni.hideLoading();
				}
			},
			async tabChange(index) {
				if (this.tabsIndex === index) {
					return;
				}
				this.tabsIndex = index;
				if (this.type != 'warehousing') {
					this.orderTypeUpdate(true);
				}
				await this.pullOrderList();
			},
			setNavbarTitle() {
				let str = '待进仓';
				switch(this.type) {
					case 'notWarehousing':
					default:
						str = '待进仓';
						break;
					case 'warehousing':
						str = '已进仓';
						break;
					case 'outWarehousing':
						str = '待出仓';
						break;
				}
				uni.setNavigationBarTitle({
					title: str
				});
			},
			showImage(item){
				// uni.navigateTo({
				// 	url: `/pages/order/pack`
				// })
				uni.navigateTo({
					url:`/pages/showImage/show-image?img=${item.good_pic[0]}`
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}
	
	/deep/ .uni-date-editor  {
		width: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
	}
	
	/deep/ .u-subsection--button {
		padding-top: 4rpx !important;
		padding-bottom: 4rpx !important;
	}
	
	
	.head-block {
		width: 100%;
		height: 286rpx;
		
		&.head-time-range {
			height: 352rpx;
		}
		
		.head {
			position: fixed;
			z-index: 10;
			left: 0;
			width: inherit;
			height: inherit;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 0 0 20rpx 20rpx;
			box-shadow: 2rpx 2rpx 28rpx 0 rgba(0,0,0,0.06);
			
			.tabs {
				width: 100%;
				height: 90rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				
				.tab-item {
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					
					.txt {
						font-size: 32rpx;
						font-weight: 500;
						color: #333;
						transition: all .3s;
					}
					
					.icon {
						position: absolute;
						width: 0;
						height: 8rpx;
						border-radius: 8rpx;
						background: linear-gradient(55deg, #E6201A 0%, #E6201A 0%, #FF3023 100%);
						top: 100%;
						transform: translateY(10rpx);
						transition: all .3s;
					}
				}
				
				.tab-item.active {
					.txt {
						font-weight: bold;
					}
					
					.icon {
						width: 34rpx;
					}
				}
			}
		
			.order-search {
				width: 100%;
				height: 80rpx;
				border-radius: 80rpx;
				background-color: #f5f5f5;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30rpx;
				box-sizing: border-box;
				
				.img {
					width: 34rpx;
					height: 34rpx;
				}
				
				.inp,
				.inp-place {
					text-align: left;
					font-size: 26rpx;
					font-weight: 500;
					color: #666;
				}
				
				.inp {
					flex: 1;
					padding-left: 20rpx;
					box-sizing: border-box;
					color: #333;
				}
			}
		
			.other-condition {
				width: 100%;
				height: 74rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.order-type {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					flex: 1;
					
					.txt {
						padding-right: 10rpx;
						font-size: 28rpx;
						font-weight: 600;
						color: #333;
					}
					
					.img {
						width: 20rpx;
						height: 20rpx;
					}
				}
				
				.warehouse {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					
					.txt {
						padding-right: 10rpx;
						font-size: 28rpx;
						font-weight: 500;
						color: #333;
					}
					
					.img {
						width: 20rpx;
						height: 20rpx;
					}
				}
				
				.surname-search {
					width: 260rpx;
					height: 60rpx;
					border-radius: 60rpx;
					background-color: #f5f5f5;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-right: 10rpx;
					box-sizing: border-box;
					margin-left: 76rpx;
					
					.image {
						width: 64rpx;
						height: 48rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 48rpx;
						background: #E6E6E6;
						box-sizing: border-box;
						
						.img {
							width: 32rpx;
							height: 32rpx;
						}
					}
					
					.inp,
					.inp-place {
						text-align: left;
						font-size: 24rpx;
						font-weight: 500;
						color: #999;
					}
					
					.inp {
						flex: 1;
						padding: 0 22rpx;
						box-sizing: border-box;
						color: #333;
					}
				}
			
				.product-search,
				.addressee-search {
					width: 240rpx;
					height: 60rpx;
					border-radius: 60rpx;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					padding: 0 30rpx;
					box-sizing: border-box;
					margin-left: 20rpx;
					background-color: #f5f5f5;
					
					.inp,
					.inp-place {
						font-size: 24rpx;
						font-weight: 500;
						color: #999;
						text-align: left;
					}
					
					.inp {
						flex: 1;
						color: #333;
					}
				}
				
				.product-search {
					margin-left: 0;
				}
			}
		
			.time-range {
				width: 100%;
				height: 68rpx;
				display: flex;
				align-items: flex-end;
				justify-content: space-between;

				.time-item {
					width: 330rpx;
					height: 60rpx;
					border-radius: 60rpx;
					box-sizing: border-box;
					border: 2rpx solid #ccc;
					padding: 0 30rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.inp,
					.inp-place {
						font-size: 24rpx;
						font-weight: 500;
						color: #999;
						text-align: left;
					}
					
					.inp {
						flex: 1;
						padding-right: 20rpx;
						box-sizing: border-box;
						color: #333;
						font-weight: bold;
					}
					
					.img {
						width: 16rpx;
						height: 10rpx;
					}
				}
			}
		}
	}

	.order-list {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		
		.order-item {
			background-color: #fff;
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			box-shadow: 2rpx 2rpx 28rpx 0 rgba(0,0,0,0.06);
			
			.order-head {
				display: flex;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				padding: 20rpx 0;
				border-bottom: 2rpx solid rgba(#000, .04);
				
				.order-type {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					
					.txt {
						font-size: 24rpx;
						font-weight: bold;
						color: #333;
					}
					
					.img {
						width: 34rpx;
						height: 34rpx;
						margin-right: 15rpx;
					}
				}
				
				.order-number {
					font-size: 24rpx;
					font-weight: 500;
					color: #333;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					
					.copy-icon {
						width: 24rpx;
						height: 24rpx;
						margin-left: 10rpx;
					}
				}
			}
		
			.order-content {
				padding: 15rpx 0 30rpx 0;
				box-sizing: border-box;
				width: 100%;
				
				.main-order-num {
					font-size: 26rpx;
					font-weight: 500;
					color: #333;
					padding: 10rpx 0;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					
					.copy-icon {
						width: 24rpx;
						height: 24rpx;
						margin-left: 10rpx;
					}
				}
				
				.time-status {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-bottom: 15rpx;
					
					.time {
						font-size: 24rpx;
						font-weight: 500;
						color: #999;
					}
					
					.status {
						font-size: 26rpx;
						font-weight: bold;
						color: #999;
					}
					
					.status.status-red {
						color: #E6201A;
					}
					
					.status.status-green {
						color: #56AA44;
					}
				}
			
				.goods {
					display: flex;
					align-items: stretch;
					justify-content: space-between;
					margin-bottom: 25rpx;
					
					.image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 12rpx;
						overflow: hidden;
						
						.img {
							width: 100%;
							height: 100%;
						}
					}
					
					.goods-info {
						flex: 1;
						padding-left: 18rpx;
						box-sizing: border-box;
						display: flex;
						align-items: stretch;
						justify-content: space-between;
						flex-direction: column;
						
						.title-warehouse {
							display: flex;
							align-items: center;
							justify-content: space-between;
							overflow: hidden;
							
							.title {
								flex: 1;
								font-size: 30rpx;
								font-weight: bold;
								color: #333;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
							
							.warehouse {
								padding-left: 30rpx;
								font-size: 26rpx;
								font-weight: bold;
								color: #333;
							}
						}
						
						.transport-info {
							display: flex;
							align-items: flex-end;
							justify-content: space-between;
							
							.type-info,
							.number-info {
								line-height: 36rpx;
								font-size: 26rpx;
								font-weight: 500;
								display: flex;
								align-items: flex-start;
								justify-content: flex-end;
								flex-direction: column;
							}
							
							.type-info {
								color: #666;
								
								.cushion-freight {
									color: #999;
								}
								
								.cushion-freight-red {
									color: #E6201A;
								}
							}
							
							.type-info-red {
								color: #E6201A;
							}
							
							.number-info {
								color: #333;
							}
						}
					}
				}
		
				.express-info {
					width: 100%;
					
					.pick-up,
					.receiving,
					.time,
					.freight,
					.apply {
						font-size: 24rpx;
						font-weight: 500;
						color: #999;
						height: 40rpx;
					}
					
					.freight.freight-read {
						color: #E6201A;
					}
					
					.edit-btn {
						width: 144rpx;
						height: 52rpx;
						border-radius: 52rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: center;
						border: 3rpx solid #333;
						color: #333;
						font-weight: 26rpx;
						font-weight: bold;
					}
					
					.delete-btn {
						width: 78rpx;
						height: 52rpx;
						border-radius: 52rpx;
						border: 3rpx solid #ccc;
						display: flex;
						align-items: center;
						justify-content: center;
						margin:0 15rpx;
						
						.img {
							width: 27rpx;
							height: 27rpx;
						}
					}
				}
				
				.not-warehousing {
					width: 100%;
					
					.time-operation {
						display: flex;
						align-items: center;
						justify-content: space-between;
						
						.operation {
							display: flex;
							align-items: center;
							justify-content: flex-end;
						}
					}
				}
				
				.warehousing {
					width: 100%;
					
					.specs-operation {
						width: 100%;
						display: flex;
						align-items: flex-end;
						justify-content: space-between;
						
						.specs {
							// width: 434rpx;
							width: 100%;
							background-color: #f5f5f5;
							border-radius: 0 12rpx 12rpx 12rpx;
							padding: 10rpx 20rpx;
							box-sizing: border-box;
							display: flex;
							align-items: center;
							justify-content: space-between;
							flex-wrap: wrap;
							
							.specs-item {
								width: 50%;
								text-align: left;
								font-size: 24rpx;
								font-weight: 500;
								color: #999;
								line-height: 45rpx;
							}
						}
					}
					.btn-list{
						width: 100%;
						margin-top: 20rpx;
						.see-image{margin-left: auto;}
					}
				}
			
				.out-warehousing {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.pick-freight {
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
					
					.specs {
						width: 100%;
						background-color: #f5f5f5;
						display: flex;
						align-items: center;
						justify-content: space-between;
						border-radius: 0 12rpx 12rpx 12rpx;
						padding: 12rpx 20rpx;
						box-sizing: border-box;
						
						.specs-item {
							flex: 1;
							text-align: left;
							font-size: 24rpx;
							font-weight: 500;
							color: #999;
							line-height: 40rpx;
						}
					}
					
					.back-btn {
						width: 120rpx;
						height: 50rpx;
						border-radius: 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;
						font-size: 28rpx;
						background-color: #E6201A;
					}
					
					// .see-image{
					// 	width: 150rpx;
					// 	height: 50rpx;
					// 	border-radius: 10rpx;
					// 	display: flex;
					// 	align-items: center;
					// 	justify-content: center;
					// 	color: #fff;
					// 	font-size: 28rpx;
					// 	background-color: #E6201A;
					// }
				}
			}
		}
		
		.order-item:last-of-type {
			margin-bottom: 0;
		}
	}

	.order-summary-block {
		width: 100%;
		height: 166rpx;
		
		.order-summary {
			width: inherit;
			height: inherit;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 9;
			background-color: #fff;
			box-shadow: 0 -4rpx 18rpx 0 rgba(0,0,0,0.05);
			border-radius: 20rpx 20rpx 0 0;
			
			.summary {
				width: 100%;
				height: 98rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.summary-info {
					flex: 1;
					padding-right: 30rpx;
					box-sizing: border-box;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					
					.order-all {
						display: flex;
						align-items: center;
						justify-content: flex-start;
						position: relative;
						
						.img {
							width: 40rpx;
							height: 40rpx;
						}
						
						.txt {
							padding: 0 22rpx 0 12rpx;
							font-size: 24rpx;
							font-weight: 500;
							color: #999;
						}
						
						&::after {
							content: ' ';
							display: block;
							width: 4rpx;
							height: 20rpx;
							border-radius: 4rpx;
							background-color: #f5f5f5;
						}
					}
					
					.summary-detail {
						flex: 1;
						padding-left: 30rpx;
						box-sizing: border-box;
						display: flex;
						align-items: flex-start;
						justify-content: space-between;
						flex-direction: column;
						
						.summary-item {
							display: flex;
							align-items: center;
							justify-content: flex-start;
							
							.title,
							.value {
								font-size: 24rpx;
								font-weight: 500;
							}
							
							.title {
								color: #5F6166;
							}
							
							.value {
								color: #333;
							}
						}
					}
				}
				
				.pack-btn {
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: #E82E2E;
					border-radius: 16rpx;
					width: 200rpx;
					height: 80rpx;
					color: #fff;
					font-size: 32rpx;
					font-weight: bold;
				}
			}
		}
	}
	.see-image{
		width: 150rpx;
		height: 50rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 28rpx;
		background-color: #E6201A;
	}
</style>
